<template>
  <div class="login">
    <div class="mylogin">
      <h4>用户登录</h4>
      <div class="Login_input">
        <el-input
          v-model="username"
          placeholder="请输入用户名"
          prefix-icon="User"
        />
      </div>
      <div class="Login_input">
        <el-input
          v-model="password"
          type="password"
          placeholder="请输入密码"
          show-password
          prefix-icon="Lock"
        />
      </div>
      <div class="Login_input">
        <el-button type="primary" @click="gologin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Public from "@/stores/store";
const Pubdata = Public();
import router from "@/router";
import apis from "../http/apis";
export default {
  name: "MystyLogin",

  data() {
    return {
      username: "",
      password: "",
    };
  },

  mounted() {},

  methods: {
    async gologin() {
      let data = await apis.gettestData({
        username: (this as any).username,
        password: (this as any).password,
      });

      localStorage.setItem("Stytoken", (data as any).data.token);
      Pubdata.Userinfo = (data as any).data;
      if (localStorage.getItem("Stytoken")) {
        router.replace("/");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: #2d3a4b;
  overflow: hidden;
  .mylogin {
    width: 330px;
    height: 300px;
    margin: 150px auto;
    h4 {
      color: #fff;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      margin-top: 0;
      margin-bottom: 5vh;
    }
    .Login_input {
      margin: 20px 0;
      .el-button--primary {
        width: 100%;
      }
    }
  }
}
</style>
